import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet,View,ImageBackground} from 'react-native';
import {scaleSize} from '../../../utils/screen';
import FontText from '../FontText';
import { IMGCACHEPATH } from '../../../utils/downImgUtils';
export default class CategeryItem extends Component {
    render() {
        let {number,name,image,name2,total_products,version} = this.props;
        return (
            <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                style = {styles.box}>
                <View
                    style = {styles.boxBg}
                    >
                    <FontText style = {[styles.name,styles.number]} font = {'book'}>{total_products}</FontText>
                        {
                            image
                            ?<Image
                                style = {[styles.boxBg,styles.imgBox]}
                                source = {{uri:`file://${IMGCACHEPATH}${image}?v=${version}`}}
                                >
                            </Image>
                            :
                            <View style = {styles.imgBg}>
                                <Image style = {styles.img} source = {require("../../../access/imgs/categery.png")} />
                            </View>
                        }
                    <View style = {styles.nameBox}>
                        <FontText numberOLines = {2} style = {styles.name} font = {'book'}>{name+name2}</FontText>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
}
const styles = StyleSheet.create({
    box:{
        height:scaleSize(340),
        width:scaleSize(340),
        backgroundColor: "#151c2e",
    },
    boxBg:{
        height:scaleSize(340),
        width:scaleSize(340),
        justifyContent:"space-between"
    },
    imgBox:{
        position: "absolute",
        left:0,
        top:0,
        bottom:0,
        right:0,
        zIndex:-1
    },
    nameBox:{
        height:scaleSize(100),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: "rgba(21,28,46,0.5)",
        paddingHorizontal:scaleSize(30)
    },
    name:{
        color:"#fff",
        fontSize: scaleSize(32),
    },
    imgBg:{
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    img:{
        width:scaleSize(139),
        height:scaleSize(109)
    },
    number:{
        height:scaleSize(80),
        textAlign:"right",
        padding:scaleSize(30),
    }
})